<template>
  <div :style="{paddingTop:configFields.length?'12px':''}" class="draggable-container">
    <transition-group
      :style="{ borderTop: configFields.length > 4 ? '1px solid #EBEEFD': 'none'}"
      type="transition"
      class="draggable-item-list">
      <div
        v-for="(item, index) in configFields"
        :key="index + item.name"
        :style="{ borderTop: configFields.length > 4 ? 'none' : '1px solid #EBEEFD'}"
        class="draggable-item">
        <div class="check"><el-checkbox v-model="item[checkKey]" @change="onCheckboxChange" /></div>
        <div :style="{'fontWeight': item[checkKey] ? 'bold' : ''}" class="draggable draggable-move one-row">
          <ToolTip :content="item.realName || item.name" />
        </div>
      </div>
    </transition-group>
  </div>
</template>

<script>
import draggable from 'vuedraggable';
import draggableImg from '@/assets/orderlist/draggable.png';
export default {
  name: 'SettingGraggable',
  components: {
    draggable
  },
  model: {
    prop: 'fields',
    event: 'change'
  },
  props: {
    groupName: {
      type: String,
      default: 'list'
    },
    checkKey: { // 选中判断字段
      type: String,
      default: 'isCheck'
    },
    fields: {
      type: Array,
      default: () => []
    },
    maxSelectNum: { // 最大可选择数量
      type: Number,
      default: Infinity
    }
  },
  data() {
    return {
      draggableImg
    };
  },
  computed: {
    configFields: {
      get() {
        return this.fields;
      },
      set(list) {
        this.$emit('change', list);
      }
    }
  },
  methods: {
    // 获取当前选中的个数
    getCurSelectedNum() {
      return this.configFields.filter(field => field[this.checkKey]).length;
    },
    getSubName(item, index) {
      if (item.isSubTable || item.linkFormKey) {
        const subformName = this.configFields[index].realName.split('.')[0];
        return subformName + '.' + item.name;
      }
      return item.name;
    },
    setName(name, index) {
      this.configFields[index].name = name;
      this.$emit('change', this.fields);
      this.$emit('setName');
    },
    onCheckboxChange() {
      this.$emit('getCurSelectedNum', this.getCurSelectedNum());
      this.$emit('setListData');
      this.$forceUpdate();
    }
  }
};
</script>

<style scoped lang="scss">
.draggable-container {
  max-height: 500px;

  @include scrollBar($x: hidden, $y: auto);
  .draggable-item-list {
    display: flex;
    flex-wrap: wrap;
    border-left: 1px solid #EBEEFD;
    width: 640px;
    .draggable-item {
      position: relative;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #EBEEFD;
      border-right: 1px solid #EBEEFD;
      // width: 160px;
      width: 25%;
      height: 47px;
      padding: 0 17px;
      background-color: #fff;
      overflow: hidden;
      .check {
        margin-right: 8px;
      }
      .draggable {
        flex: 1;
        font-size:14px;
        font-family:PingFangSC-Regular,PingFang SC;
        color:rgba(20,28,61,1);
        line-height:1.2;
      }
      .edit-icon {
        width: 14px;
        height: 14px;
        position: absolute;
        right: 7px;
        top: 16px;
        font-size: 14px;
        cursor: pointer;
      }
      .draggable-img {
        width: 12px;
        height: 12px;
        position: absolute;
        right: 6px;
        top: 15px;
      }
      &:hover {
        background-color: #FAFAFA;
        .draggable-img {
          visibility: visible;
        }
      }
      .draggable-move {
        // cursor: move;
      }
      .name-wrap {
        display: flex;
        align-items: center;
        width: 100%;
        flex: 1;
        padding-right: 4px;
      }
      .name {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .one-row {
        display: flex;
        overflow: hidden;
        align-items: center;
      }
    }
  }
}
</style>
